<template>
    <div class="tab-container">
        <van-tabbar v-model="active"  :active-color="mainThemeColor" @change="handleChange()">
            <van-tabbar-item icon="wap-home" to="/parking_pay">停车缴费</van-tabbar-item>
            <van-tabbar-item icon="point-gift-o" to="/activityCalendar" :dot="showDot">缴费记录</van-tabbar-item>
            <van-tabbar-item icon="gift-card-o" to="/binding" :dot="showDot">我的车辆</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/account" >优惠券</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    export default {
        data(){
            return {
                active:0,
                dot: false,
                info: 1
            }
        },
        watch:{
            $route: 'handleRoute'
        },
        computed: {
            ...mapGetters(['mainThemeColor']),
            showDot(){
                return this.dot
            },
            infos() {
                return this.info > 0 ? this.info : ''
            }
        },
        methods:{
            handleChange(){},
            handleRoute(route){
                console.log(route)
                this.active=route.meta.parkingTabsIndex
            }
        }
    }
</script>

<style lang="less">
    .tab-container{
        position: fixed;
        bottom: 0;
        height: 50px;
    }
</style>
